<template>
	<view class="container">
		<view class="order-tab" style="justify-content: center">
			<view class="tab-item" :class="order_index == 1 ? 'select' : ''" @click="checkTabOne(1)">
				<text>普通订单</text>
			</view>
			<view class="tab-item" style="padding-left: 40rpx" :class="order_index == 2 ? 'select' : ''"
				@click="checkTabOne(2)">
				<text>拼团订单</text>
			</view>
		</view>
		<view class="order-tab">
			<view class="tab-item" :class="item.value == tab_index ? 'select' : ''" v-for="(item, i) in tabList"
				:key="i" @click="checkTabTwo(item.value)">
				<text>{{ item.text }}</text>
			</view>
		</view>
		<view class="list">
			<view class="item" v-for="(item, index) in list" :key="item.id" @click.stop="toDetail(item)">
				<!-- 售后 -->
				<view class="order_no" v-if="tab_index == 5 && order_index == 1">
					<view class="left">
						<!-- 订单号：{{item.order_no}} -->
					</view>
					<view class="status">
						{{ item.type == 0 ? "仅退款" : item.type == 1 ? "退货退款" : "" }}
					</view>
				</view>
				<view class="order_no" v-else>
					<view class="left"> 订单号：{{ item.order_no }} </view>
					<view class="status">
						{{ order_index == 1 ? orderStatus[item.state - 1] : groupsOrderStatus[item.state - 1] }}
					</view>
				</view>

				<view class="goods" v-if="tab_index == 5 && order_index == 1">
					<view class="g-item">
						<image :src="$img_base_url(item.goods.image)" mode="aspectFill"></image>
						<view class="info">
							<view class="n_p">
								<view class="name one-row">
									{{ item.goods.title }}
								</view>
								<view class="price">
									¥<text>{{ gPrice(item.goods.price)[0] }}</text>{{ gPrice(item.goods.price)[1] }}
								</view>
							</view>
							<view class="spec">
								<view class="text">
									{{ item.goods.difference }}
								</view>
								<text v-if="(order_index == 1 || order_index == 2) && tab_index != 5">x
									{{ item.goods.number }}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="goods" v-else>
					<view class="g-item" v-for="(item_g, i) in item.goods" :key="item_g.id">
						<image :src="$img_base_url(item_g.image)" mode="aspectFill"></image>
						<view class="info">
							<view class="n_p">
								<view class="name one-row">
									{{ item_g.title }}
								</view>
								<view class="price">
									¥<text>{{ gPrice(item_g.price)[0] }}</text>{{ gPrice(item_g.price)[1] }}
								</view>
							</view>
							<view class="spec">
								<view class="text">
									{{ item_g.difference }}
								</view>
								<text>x {{ item_g.number }}</text>
							</view>
						</view>
					</view>
				</view>

				<view class="pay_price" v-if="tab_index == 5 && order_index == 1">
					<!-- <text></text><text>退款金额</text>
					<view class="num">
						¥ <text>{{gPrice(item.price)[0]}}</text>{{gPrice(item.price)[1]}}
					</view> -->
				</view>
				<view class="pay_price" v-else>
					<text>含运费</text><text>需付款</text>
					<view class="num">
						¥ <text>{{ gPrice(item.pay.price)[0] }}</text>{{ gPrice(item.pay.price)[1] }}
					</view>
				</view>

				<!-- 已取消显示 -->
				<view class="cancel-box b-box" v-if="item.state == 7">
					<button class="black-btn">删除订单</button>
					<button class="red-btn">再买一单</button>
				</view>

				<!-- 拼单中显示 -->
				<view class="p-ing b-box" v-if="false">
					<view class="left">
						<view class="text"> 距离结束还剩 </view>
						<view class="time"> <text>23</text>:<text>59</text>:<text>59</text> </view>
					</view>
					<view class="right">
						<button>邀请好友参团</button>
					</view>
				</view>

				<!-- 待付款显示 -->
				<view class="pay b-box" v-if="item.state == 1">
					<button class="black-btn">取消订单</button>
					<button class="black-btn">修改地址</button>
					<button class="m-btn">去支付</button>
				</view>

				<!-- 待发货显示 -->
				<view class="cancel-box b-box" v-if="item.state == 2">
					<button class="black-btn" @click.stop="toOrder(item)">再来一单</button>
					<!-- <button class="black-btn">删除订单</button> -->
					<button class="red-btn">催发货</button>
				</view>

				<!-- 待收货显示 -->
				<view class="cancel-box b-box" v-if="item.state == 3">
					<button class="black-btn" @click.stop="toOrder(item)">再来一单</button>
					<button class="black-btn">查看物流</button>
					<button class="d-c-btn">确认收货</button>
				</view>

				<!-- 待评价显示 -->
				<view class="cancel-box b-box" v-if="item.state == 4">
					<button class="black-btn" @click.stop="toOrder(item)">再来一单</button>
					<button class="red-btn" @click.stop="toComment(item)">去评价</button>
				</view>
				<!-- 售后显示 -->
				<view class="cancel-box b-box" v-if="tab_index == 5 && order_index == 1">
					<button class="red-btn">查看详情</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const FormData = require("@/utils/formdata/index.js");
	import {
		goodsOrderList,
		groupsOrderList,
		refundList
	} from "@/utils/api/mallApi.js";
	export default {
		data() {
			return {
				order_index: 1,
				tabList: [],
				ptTabList: [{
						text: "全部",
						value: "",
					},
					{
						text: "待付款",
						value: "1",
					},
					{
						text: "待发货",
						value: "2",
					},
					{
						text: "待收货",
						value: "3",
					},
					{
						text: "评价",
						value: "4",
					},
					{
						text: "售后",
						value: "5",
					},
				],
				groupsTabList: [{
						text: "全部",
						value: "",
					},
					{
						text: "待付款",
						value: "1",
					},
					{
						text: "待成团",
						value: "2",
					},
					{
						text: "待发货",
						value: "3",
					},
					{
						text: "待收货",
						value: "4",
					},
					{
						text: "评价",
						value: "5",
					},
				],
				tab_index: "",
				page: 1,
				total: 0,
				last_page: 0,
				list: [],
				orderStatus: ["待支付", "待发货", "待收货", "待评论", "售后", "已完成", "已取消"],
				groupsOrderStatus: ["待支付", "待成团", "待发货", "待收货", "待评论", "已完成", "已取消"],
			};
		},
		onLoad() {
			this.tabList = this.ptTabList;
			// this.getOrderList()
			this.order_index = 1;
			this.getOrderList();
		},
		onShow() {},
		methods: {
			checkTabOne(value) {
				this.order_index = value;
				this.tab_index = "";
				if (value == 1) {
					this.tabList = this.ptTabList;
					this.getOrderList();
				} else {
					this.tabList = this.groupsTabList;
					this.getGroupsOrderList();
				}
			},
			checkTabTwo(value) {
				this.tab_index = value;
				// console.log(value,'--');
				if (value == 5 && this.order_index == 1) {
					this.getRefundList();
				} else {
					if (this.order_index == 1) {
						this.getOrderList();
					} else {
						this.getGroupsOrderList();
					}
				}
			},

			// 普通
			getOrderList() {
				uni.showLoading();
				let formData = new FormData();
				formData.append("state", this.tab_index);
				formData.append("page", this.page);
				goodsOrderList(formData.getData()).then((res) => {
					uni.hideLoading();
					if (this.page == 1) {
						this.list = res.data.data;
					} else {
						this.list = [...res.data.data, ...this.list];
					}
					this.total = res.data.total;
					this.last_page = res.data.last_page;
				});
			},

			// 拼团
			getGroupsOrderList() {
				uni.showLoading();
				let formData = new FormData();
				formData.append("state", this.tab_index);
				formData.append("page", this.page);
				groupsOrderList(formData.getData()).then((res) => {
					uni.hideLoading();
					if (this.page == 1) {
						this.list = res.data.data;
					} else {
						this.list = [...res.data.data, ...this.list];
					}
					this.total = res.data.total;
					this.last_page = res.data.last_page;
				});
			},

			// 售后
			getRefundList() {
				uni.showLoading();
				let formData = new FormData();
				formData.append("page", this.page);
				refundList(formData.getData()).then((res) => {
					uni.hideLoading();
					if (this.page == 1) {
						this.list = res.data.data;
					} else {
						this.list = [...res.data.data, ...this.list];
					}
					this.total = res.data.total;
					this.last_page = res.data.last_page;
					// console.log(res,'---')
				});
			},

			toDetail(data) {
				if (this.order_index == 1 && this.tab_index == 5) {
					// 售后详情
					uni.navigateTo({
						url: `/pagesMine/shopGoodsOrder/afterDetail/afterDetail?id=${data.id}`,
					});
				} else {
					uni.navigateTo({
						url: `/pagesMine/shopGoodsOrder/detail/detail?order_type=${this.order_index}&order_status=${data.state}&id=${data.id}`,
					});
				}
			},
			// 在来一单
			toOrder(item) {
				uni.navigateTo({
					url: "/pagesMall/goods/detail?id=" + item.goods[0].goods_id,
				});
			},
			// 去评价
			toComment(item) {
				console.log(item, "去评价");
				uni.navigateTo({
					url: "/pagesMine/shopGoodsOrder/evaluate/from?id=" +
						item.id +
						"&shop_id=" +
						item.shop_id +
						"&goods=" +
						JSON.stringify(item.goods[0]),
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.container {
		.order-tab {
			position: sticky;
			top: 0;
			left: 0;
			right: 0;
			padding: 32rpx 22rpx 12rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #ffffff;
			z-index: 3;

			.tab-item {
				text {
					font-weight: 400;
					font-size: 32rpx;
					color: #333333;
					line-height: 44rpx;
					position: relative;
				}

				&.select {
					text {
						font-weight: bold;
						font-size: 32rpx;
						color: #e72a2a;
						line-height: 44rpx;

						&::after {
							content: "";
							width: 52rpx;
							height: 8rpx;
							background: #e72a2a;
							border-radius: 4rpx;
							position: absolute;
							top: calc(100% + 4rpx);
							left: 50%;
							transform: translateX(-50%);
						}
					}
				}
			}
		}

		.list {
			padding: 0 22rpx;
			box-sizing: border-box;

			.item {
				background: #ffffff;
				box-shadow: 0rpx 0rpx 12rpx 2rpx rgba(223, 223, 223, 0.16);
				border-radius: 20rpx;
				margin-top: 20rpx;
				padding-bottom: 20rpx;

				.order_no {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 26rpx 18rpx 14rpx 22rpx;
					box-sizing: border-box;

					.left {
						font-weight: 400;
						font-size: 28rpx;
						color: #a2a2a2;
						line-height: 40rpx;
					}

					.status {
						font-weight: 400;
						font-size: 28rpx;
						color: #ff4a4a;
						line-height: 40rpx;
					}
				}

				.goods {
					padding: 0 24rpx 22rpx;
					box-sizing: border-box;
					border-top: 2rpx solid #eeeeee;

					.g-item {
						display: flex;
						align-items: center;
						margin-top: 20rpx;

						&>image {
							width: 180rpx;
							height: 180rpx;
							border-radius: 20rpx;
						}

						.info {
							width: calc(100% - 180rpx);
							padding-left: 20rpx;
							box-sizing: border-box;

							.n_p {
								display: flex;
								justify-content: space-between;
								align-items: center;

								.name {
									width: 314rpx;
								}

								.price {
									font-weight: 900;
									font-size: 28rpx;
									color: #ff2e2e;
									line-height: 56rpx;

									text {
										font-size: 32rpx;
									}
								}
							}

							.spec {
								display: flex;
								align-items: flex-start;
								margin-top: 20rpx;

								.text {
									width: 350rpx;
									font-weight: 400;
									font-size: 28rpx;
									color: #505050;
									line-height: 40rpx;
									padding-right: 70rpx;
								}

								&>text {
									font-weight: bold;
									font-size: 28rpx;
									color: #333333;
									line-height: 40rpx;
								}
							}
						}
					}
				}

				.pay_price {
					display: flex;
					justify-content: flex-end;
					align-items: center;
					padding: 20rpx 20rpx 0;
					box-sizing: border-box;
					border-top: 2rpx solid #eeeeee;

					&>text {
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;
						line-height: 40rpx;
						margin-right: 18rpx;
					}

					.num {
						font-weight: 900;
						font-size: 34rpx;
						color: #ff2e2e;
						line-height: 58rpx;
					}
				}

				.b-box {
					button {
						&:not(:first-child) {
							margin-left: 20rpx;
						}
					}

					.black-btn {
						width: 180rpx;
						height: 68rpx;
						background: #ffffff;
						border-radius: 38rpx 38rpx 38rpx 38rpx;
						border: 2rpx solid #b4b4b4;
						font-weight: 400;
						font-size: 30rpx;
						color: #333333;
						line-height: 68rpx;
					}

					.red-btn {
						width: 180rpx;
						height: 68rpx;
						background: #ffffff;
						border-radius: 38rpx 38rpx 38rpx 38rpx;
						border: 2rpx solid #e72a2a;
						font-weight: 400;
						font-size: 30rpx;
						color: #e72a2a;
						line-height: 68rpx;
					}

					.m-btn {
						width: 180rpx;
						height: 68rpx;
						background: linear-gradient(92deg, #ffa233 0%, #fb4c4c 100%);
						border-radius: 38rpx;
						font-weight: 400;
						font-size: 30rpx;
						color: #ffffff;
						line-height: 68rpx;
					}

					.d-c-btn {
						width: 180rpx;
						height: 68rpx;
						background: linear-gradient(92deg, #ffa233 0%, #fb4c4c 100%);
						border-radius: 38rpx 38rpx 38rpx 38rpx;
						// border: 2rpx solid #E72A2A;
						font-weight: 400;
						font-size: 30rpx;
						color: #ffffff;
						line-height: 68rpx;
					}
				}

				.cancel-box {
					display: flex;
					justify-content: flex-end;
					padding: 20rpx 20rpx 26rpx;

					button {
						&:not(:first-child) {
							margin-left: 20rpx;
						}
					}
				}

				.p-ing {
					padding: 2rpx 20rpx 28rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.left {
						.text {
							font-weight: 400;
							font-size: 28rpx;
							color: #000000;
							line-height: 40rpx;
						}

						.time {
							display: flex;
							align-items: center;
							font-weight: 400;
							font-size: 28rpx;
							color: #ff4a4a;
							line-height: 44rpx;
							margin-top: 20rpx;

							text {
								display: inline-block;
								width: 44rpx;
								height: 44rpx;
								font-weight: 400;
								font-size: 28rpx;
								color: #ff4a4a;
								line-height: 44rpx;
								text-align: center;
								background: #ffe6e6;
								border-radius: 8rpx;
								margin: 0 4rpx;
							}
						}
					}

					.right {
						button {
							width: 228rpx;
							height: 68rpx;
							background: linear-gradient(87deg, #ffa233 0%, #fb4c4c 100%);
							border-radius: 38rpx;
							font-weight: 400;
							font-size: 30rpx;
							color: #ffffff;
							line-height: 68rpx;
						}
					}
				}

				.pay {
					display: flex;
					justify-content: flex-end;
					padding: 20rpx 20rpx 26rpx;
				}
			}
		}
	}
</style>